<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Drawer 抽屉</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	<script src="../static/js/icons-vue.js"></script>
	<link rel="stylesheet" href="../static/css/com.css">
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">呼出一个临时的侧边栏，支持上下左右四个方向。</p>
	<p class="desc">你必须像 Dialog一样为 Drawer 设置 model-value 来控制 Drawer 的显示与隐藏状态，该属性接受一个 boolean 类型。 Drawer 包含三部分: title & body & footer, 其中 title 是一个具名 slot, 你还可以通过 title 属性来设置标题, 默认情况下它是一个空字符串, 其中 body 部分是 Drawer 组件的主区域, 它包含了用户定义的主要内容. footer和title用法一致, 用来显示页脚信息. 当 Drawer 打开时，默认设置是从右至左打开 30% 浏览器宽度。 你可以通过传入对应的 direction 和 size 属性来修改这一默认行为。 下面一个示例将展示如何使用 before-close API，更多详细用法请参考页面底部的 API 部分。</p>
	<el-radio-group v-model="direction">
		<el-radio label="ltr">left to right</el-radio>
		<el-radio label="rtl">right to left</el-radio>
		<el-radio label="ttb">top to bottom</el-radio>
		<el-radio label="btt">bottom to top</el-radio>
	</el-radio-group>
	
	<el-button type="primary" style="margin-left: 16px" @click="drawer = true">open</el-button>
	<el-button type="primary" style="margin-left: 16px" @click="drawer2 = true">with footer</el-button>
	
	<el-drawer v-model="drawer" title="I am the title" :direction="direction" :before-close="handleClose">
		<span>Hi, there!</span>
	</el-drawer>
	<el-drawer v-model="drawer2" :direction="direction">
		<template #title>
			<h4>插槽标题</h4>
			<p>加个P标签</p>
		</template>
		<template #default>
			<p>主体内容。。。</p>
			<div>
				<el-radio v-model="radio1" label="Option 1" size="large">Option 1</el-radio>
				<el-radio v-model="radio1" label="Option 2" size="large">Option 2</el-radio>
			</div>
		</template>
		<template #footer>
			<div style="flex: auto">
				<el-button @click="cancelClick">cancel</el-button>
				<el-button type="primary" @click="confirmClick">confirm</el-button>
			</div>
		</template>
	</el-drawer>
	
	<el-divider content-position="left">不添加 Title</el-divider><!-- =============================================================== -->
	<p class="desc">当你不需要标题的时候，你可以将它移除。</p>
	<p class="desc">通过设置 with-header 属性为 false 来控制是否显示标题。 如果你的应用需要具备可访问性，请务必设置好 title。</p>
	<el-button type="primary" style="margin-left: 16px" @click="drawer3 = true">open</el-button>
	<el-drawer v-model="drawer3" title="I am the title" :with-header="false">
		<span>Hi there!</span>
	</el-drawer>
	
	<el-divider content-position="left">自定义内容</el-divider><!-- =============================================================== -->
	<p class="desc">像 Dialog 组件一样，Drawer 也可以用来显示多种不同的交互。</p>
	<el-button type="primary" @click="table = true">打开嵌套表格的Drawer</el-button>
	<el-button type="primary" @click="dialog = true">打开嵌套表单的Drawer</el-button>
	<el-drawer v-model="table" title="我有一个嵌套的表格" direction="rtl" size="50%">
		<el-table :data="gridData">
			<el-table-column property="date" label="Date" width="150"></el-table-column>
			<el-table-column property="name" label="Name" width="200"></el-table-column>
			<el-table-column property="address" label="Address"></el-table-column>
		</el-table>
	</el-drawer>
	
	<el-drawer ref="drawerRef" v-model="dialog" title="我有一个嵌套的表单" :before-close="handleClose3" direction="ltr" custom-class="demo-drawer">
		<div class="demo-drawer__content">
			<el-form :model="form">
				<el-form-item label="Name" :label-width="formLabelWidth">
					<el-input v-model="form.name" autocomplete="off" />
				</el-form-item>
				<el-form-item label="Area" :label-width="formLabelWidth">
					<el-select v-model="form.region" placeholder="Please select activity area">
						<el-option label="上海" value="shanghai" />
						<el-option label="北京" value="beijing" />
					</el-select>
				</el-form-item>
			</el-form>
			<div class="demo-drawer__footer">
				<el-button @click="cancelForm">Cancel</el-button>
				<el-button type="primary" :loading="loading" @click="onClick">{{loading ? 'Submitting ...' : 'Submit'}}</el-button>
			</div>
		</div>
	</el-drawer>
	
	<el-divider content-position="left">自定义头部</el-divider><!-- =============================================================== -->
	<p class="desc">header 可用于自定义显示标题的区域。 为了保持可用性，除了使用此插槽外，使用 title 属性，或使用 titleId 插槽属性来指定哪些元素应该读取为抽屉标题。</p>
	<el-button type="primary" @click="visible = true">自定义头部Drawer</el-button>
	<el-drawer v-model="visible" :show-close="false">
		<template #header="{ close, titleId, titleClass0 }">
			<h4 :id="titleId" :class="titleClass" :title="tter">这是一个自定义标题!</h4>
			<el-button type="danger" @click="close">
				<el-icon><Close /></el-icon>关闭
			</el-button>
		</template>
		这是Drawer内容。。。
	</el-drawer>
	
	<el-divider content-position="left">嵌套抽屉</el-divider><!-- =============================================================== -->
	<p class="desc">Drawer 组件也拥有多层嵌套的方法</p>
	<p class="desc">需要设置 model-value 属性，它的类型是 boolean,当为 true 时显示 Drawer。</p>
	<el-button type="primary" style="margin-left: 16px" @click="drawer4 = true">open</el-button>
	<el-drawer v-model="drawer4" title="I'm outer Drawer" size="50%" direction="ltr">
		<div>
			<el-button @click="innerDrawer = true">Click me!</el-button>
			<el-drawer v-model="innerDrawer" title="I'm inner Drawer" :append-to-body="true" :before-close="handleClose5">
				<p>_(:зゝ∠)_</p>
			</el-drawer>
		</div>
	</el-drawer>
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			Icons: ElementPlusIconsVue,
			drawer: false,
			drawer2: false,
			drawer3: false,
			drawer4: false,
			innerDrawer: false,
			direction: 'rtl',
			radio1: 'Option 1',
			
			formLabelWidth: '80px',
			timer: null,
			table: false,
			dialog: false,
			loading: false,
			form: {
				name: '',
				region: '',
				date1: '',
				date2: '',
				delivery: false,
				type: [],
				resource: '',
				desc: '',
			},
			gridData: [
				{date: '2016-05-02',name: 'Peter Parker1',address: 'Queens, New York City1',},
				{date: '2016-05-04',name: 'Peter Parker2',address: 'Queens, New York City2',},
				{date: '2016-05-01',name: 'Peter Parker3',address: 'Queens, New York City3',},
				{date: '2016-05-03',name: 'Peter Parker4',address: 'Queens, New York City4',},
			],
			
			visible: false,
			titleId: "title-id",
			titleClass: "title-class",
			tter: "动态title",
			
			
		}
	},
	methods:{
		handleClose(done){
			this.$confirm(
				'确定要关闭Drawer吗？',
				"提示",
			).then(() => {
				done();
			}).catch(() => {
				// catch error
			})
		},
		cancelClick() {
			this.drawer2 = false
		},
		confirmClick() {
			this.$confirm(
				`是否确定选择 ${this.radio1} ?`,
				"请确定"
			).then(() => {
				this.drawer2 = false;
			}).catch(() => {
				// catch error
			})
		},
		
		onClick(){
			this.loading = true
			this.timer = setTimeout(() => {
				this.loading = false
				// 动画关闭需要一定的时间
				setTimeout(() => {
					// done()
					this.$refs.drawerRef.close();
				}, 400)
			}, 2000)
		},
		handleClose3(done){
			if(this.loading){
				return
			}
			this.$confirm(
				'你确定提交吗?',
				"请确定",
			).then(() => {
				this.loading = true
				this.timer = setTimeout(() => {
					this.loading = false
					// 动画关闭需要一定的时间
					setTimeout(() => {
						done()
					}, 400)
				}, 2000)
			}).catch(() => {
				// catch error
				setTimeout(() => {
					done()
				}, 500)
			})
		},
		cancelForm(){
			this.loading = false
			this.dialog = false
			clearTimeout(this.timer)
		},
		handleClose5(done){
			this.$confirm(
				'确定要关闭Drawer吗？',
				"提示",
			).then(() => {
				done();
			}).catch(() => {
				// catch error
			})
		},
		
	}
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)}
app.use(ElementPlus);
let vm = app.mount("#app");

</script>
</html>